import 'package:ac/common/style.dart';
import 'package:ac/model/ac_blogger_model.dart';
import 'package:ac/model/ac_login_model.dart';
import 'package:ac/route/ac_route_pages.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ac_user_detail_logic.dart';

class AcUserDetailPage extends StatelessWidget {
  final logic = Get.find<AcUserDetailLogic>();
  final state = Get.find<AcUserDetailLogic>().state;

  AcUserDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: [
          Container(
            height: 322.h,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("images/user_detail_bg.png"),
                fit: BoxFit.fill,
              ),
            )
          ),
          ListView(
            padding: EdgeInsets.only(
                top: 56.h + ScreenUtil().statusBarHeight,
                left: 20.w,
                right: 20.w),
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ClipOval(
                    child: Container(
                      padding: EdgeInsets.all(2.w),
                      color: Colors.white,
                      width: 88.w,
                      height: 88.w,
                      child: ClipOval(
                        child: CachedNetworkImage(
                            imageUrl:
                                logic.blogger.value?.userInfo?.avatar ?? ""),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 15.h),
              Container(
                width: 150.w,
                alignment: Alignment.center,
                child: Text(
                  logic.blogger.value?.userInfo?.nickname ?? "",
                  maxLines: 1,
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    overflow: TextOverflow.ellipsis,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(height: 24.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      if (logic.blogger.value?.userInfo?.isFriend == true) {
                        logic.unFollow();
                      } else {
                        logic.follow();
                      }
                    },
                    child: Container(
                      height: 32.h,
                      width: 70.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.w),
                        border: Border.all(
                            color: const Color(0xffeeeeee), width: 1.w),
                      ),
                      child: Obx(() {
                        var img =
                            logic.blogger.value?.userInfo?.isFriend == true
                                ? "images/icon_unfollow.png"
                                : "images/icon_follow.png";
                        return Image.asset(
                          img,
                          width: 22.w,
                        );
                      }),
                    ),
                  ),
                  SizedBox(width: 44.w),
                  GestureDetector(
                    onTap: logic.chat,
                    child: Container(
                      height: 32.h,
                      width: 156.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.w),
                        gradient: const LinearGradient(
                          colors: [
                            Color(0xffFFC371),
                            Color(0xffFF5F6D),
                          ],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(
                            "images/icon_chat.png",
                            width: 22.w,
                          ),
                          SizedBox(width: 8.w),
                          Text(
                            "Chat",
                            style: TextStyle(
                              fontSize: 18.sp,
                              color: Colors.white,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 16.h),
              Image.asset(
                "images/user_detail_data.png",
                height: 80.h,
              ),
              SizedBox(height: 42.h),
              Text(
                "Post",
                style: TextStyle(
                  fontSize: 16.sp,
                  color: textColorBlack,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(height: 16.h),
              Obx(() {
                if (logic.blogger.value == null) return const SizedBox.shrink();
                return GridView.builder(
                  shrinkWrap: true,
                  padding: EdgeInsets.zero,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    var item = logic.blogger.value!.post[index];
                    var userInfo = logic.blogger.value!.userInfo;
                    return _postItem(item, userInfo);
                  },
                  itemCount: logic.blogger.value!.post.toList().length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisSpacing: 16.w,
                    crossAxisSpacing: 11.w,
                    childAspectRatio: 0.7,
                  ),
                );
              })
            ],
          ),
          _title(),
        ],
      ),
    );
  }

  Widget _postItem(Post item, Userinfo? userInfo) {
    return GestureDetector(
      onTap: () {
        Get.toNamed(AcRouteNames.postDetail, arguments: {
          "post": item,
          "userInfo": userInfo,
        });
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: const Color(0xFFCCCCCC),
            width: 0.5.w,
          ),
          borderRadius: BorderRadius.circular(8.r),
        ),
        child: Column(
          children: [
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8.r),
                    topRight: Radius.circular(8.r),
                  ),
                  image: DecorationImage(
                    image: AssetImage(item.mainImage),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Container(
                padding: EdgeInsets.all(10.w),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(8.r),
                      bottomRight: Radius.circular(8.r)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.title.fixAutoLines(),
                      maxLines: 1,
                      style: TextStyle(
                        fontSize: 10.sp,
                        color: textColorBlack,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    SizedBox(height: 8.h),
                    Row(
                      children: [
                        ClipOval(
                          child: CachedNetworkImage(
                            imageUrl: userInfo?.avatar ?? "",
                            width: 20.w,
                            height: 20.w,
                          ),
                        ),
                        SizedBox(width: 4.w),
                        Expanded(
                          child: Text(
                            (userInfo?.nickname ?? "").fixAutoLines(),
                            maxLines: 1,
                            style: TextStyle(
                              fontSize: 10.sp,
                              color: textColorBlack,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ),
                        SizedBox(width: 8.w),
                        Image.asset(
                          "images/icon_home_${item.isLiked ? "yes" : "no"}.png",
                          width: 15.w,
                          height: 15.w,
                        ),
                      ],
                    )
                  ],
                ))
          ],
        ),
      ),
    );
  }

  Positioned _title() {
    return Positioned(
      top: ScreenUtil().statusBarHeight,
      child: SizedBox(
        height: 44.h,
        width: 375.w,
        child: Stack(
          children: [
            Positioned(
              left: 20.w,
              top: 0,
              bottom: 0,
              child: GestureDetector(
                onTap: () {
                  Get.back();
                },
                child: Image.asset(
                  "images/icon_back_2.png",
                  width: 28.w,
                ),
              ),
            ),
            Positioned(
              right: 20.w,
              top: 0,
              bottom: 0,
              child: GestureDetector(
                onTap: logic.more,
                child: Image.asset(
                  "images/icon_more.png",
                  width: 28.w,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
